<template>
  <div>
    <input placeholder="输入关键字搜索" v-model.trim="selectVal" @blur="queryData"/>
    
      <!-- 就诊数据 -->
      <medical-table :list="records"></medical-table>
      
    
  </div>
</template>
<script>
import MedicalTable from "./components/MedicalTable.vue";
export default {
  components: { MedicalTable },
  props: {},
  data() {
    return {
      selectVal:'',
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // queryData(){
      
    //   const newRecords = []
    //   this.records.forEach(item => {
    //     if(item.doctor.indexOf(this.selectVal) !== -1 ){
    //       newRecords.push(item)
    //     }
    //     return newRecords
    //   })
    //   this.records = newRecords
    // }
    queryData(){
      const newRecords = []
      if(selectVal === ''){
        return this.records
      }else{
        this.records = this.records.filters(item => item.doctor.includes(this.selectVal))
      }
    }
  },
};
</script>
<style scoped>

</style>